<template>
	<!-- 首页 -->
	<!-- 颜色 #C78748	#FFBF81	#673A19	#42BAE7	#5D9319	#E0593B	#FFF9EF  -->
	<!-- 字体	
		大标题 	36rpx
		二级标题	32rpx
		三级标题	28rpx
		标签		24rpx
		说明文字	24rpx
	  -->
	<view class="content">
		<view class="hader">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" duration="500"
					indicator-active-color="#FFF">
					<swiper-item>
						<image class="bgImg"
							src="https://ts1.cn.mm.bing.net/th/id/R-C.91010061f618c70286102add1ba48258?rik=rHbfMyr4Emjy7w&riu=http%3a%2f%2fimages3.ctrip.com%2fwri%2fimages%2f200809%2f3337917318121310734.jpg&ehk=nvAY0afSkPZP7DVoDzuJPfbrtkKYBR%2f8AXMItifKzpA%3d&risl=&pid=ImgRaw&r=0"
							mode=""></image>
					</swiper-item>
					<swiper-item>
						<image class="bgImg"
							src="https://tse3-mm.cn.bing.net/th/id/OIP-C.h785ZaRIv7C8lVeQpeN5fwHaEo?pid=ImgDet&rs=1"
							mode=""></image>
					</swiper-item>
					<swiper-item>
						<image class="bgImg"
							src="https://ts1.cn.mm.bing.net/th/id/R-C.33dbe278bb832568c132d2a7eb6936d1?rik=6AqyAHCF0tYoaA&riu=http%3a%2f%2fwww.46ps.com%2fuploadfile%2f2012%2f0213%2f20120213054726239.jpg&ehk=zsmEinpoDv0T6m0d%2fPh0hQnwf3np7VX0lRzGud5qpB4%3d&risl=&pid=ImgRaw&r=0"
							mode=""></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="main">
			<!-- 首页导航 -->
			<view class="nav">
				<view class="main_nav">
					<navigator url="/pages/subpage/votebuying/votebuying">
						<view class="banner">
							<image src="../../static/img/1.png" mode=""></image>
							<view class="title">线上购票</view>
						</view>
					</navigator>
					<view class="banner">
						<image src="../../static/img/2.png" mode=""></image>
						<view class="title">地图导航</view>
					</view>
					<view class="banner">
						<image src="../../static/img/3.png" mode=""></image>
						<view class="title">酒店民宿</view>
					</view>
					<view class="banner">
						<image src="../../static/img/4.png" mode=""></image>
						<view class="title">特色美食</view>
					</view>
					<view class="banner">
						<image src="../../static/img/5.png" mode=""></image>
						<view class="title">银杏游记</view>
					</view>
				</view>
			</view>
			<!-- 天气 -->

			<view class="weather">
				<navigator url="/pages/subpage/weather/weather">
					<image class="bgImg"
						src="https://tse3-mm.cn.bing.net/th/id/OIP-C.h785ZaRIv7C8lVeQpeN5fwHaEo?pid=ImgDet&rs=1"
						mode="">
					</image>
					<view class="w_content">
						<view class="prediction">
							<text class="iconfont icon-tianqi-duoyun"></text>
							<text>周六</text>
							<text>多云</text>
						</view>
						<view class="temperature">
							<text>15~21°C</text>
						</view>
					</view>
				</navigator>
			</view>
			<!-- 银杏之旅 -->
			<view class="recommend recommend1">
				<view class="title">
					<text class="t_left">银杏之旅</text>
					<text>全部 ></text>
				</view>
				<view class="imgList">
					<view class="l_top">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" :show-scrollbar="false">
							<view class="box">
								<navigator url="/pages/subpage/introduce/introduce">
									<view class="img">
										<view class="imgbox">
											<image
												src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.ssl.qhimgs1.com%2Fbdr%2F460__%2Ft01c6ef51c233b1c311.jpg&refer=http%3A%2F%2Fp1.ssl.qhimgs1.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658649934&t=545eed7f2f896a705d8931ebe34fe3f5"
												mode=""></image>
										</view>
										<view class="">
											五老树
										</view>
									</view>
								</navigator>
								<view class="img">
									<view class="imgbox">
										<image
											src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.ssl.qhimgs1.com%2Fbdr%2F460__%2Ft01c6ef51c233b1c311.jpg&refer=http%3A%2F%2Fp1.ssl.qhimgs1.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658649934&t=545eed7f2f896a705d8931ebe34fe3f5"
											mode=""></image>
									</view>
									<view class="">
										胡氏祠
									</view>
								</view>
								<view class="img">
									<view class="imgbox">
										<image
											src="https://img0.baidu.com/it/u=1018667150,1160142692&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"
											mode=""></image>
									</view>
									<view class="">
										十里堤
									</view>
								</view>
								<view class="img">
									<view class="imgbox">
										<image
											src="https://img0.baidu.com/it/u=1018667150,1160142692&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"
											mode=""></image>
									</view>
									<view class="">
										十里堤
									</view>
								</view>
								<view class="img">
									<view class="imgbox">
										<image
											src="https://img0.baidu.com/it/u=1018667150,1160142692&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"
											mode=""></image>
									</view>
									<view class="">
										十里堤
									</view>
								</view>
							</view>

						</scroll-view>
					</view>
					<view class="l_buttom">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" :show-scrollbar="false">
							<view class="box">
								<view id="demo1" class="img">
									<view class="imgbox">
										<image
											src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.ssl.qhimgs1.com%2Fbdr%2F460__%2Ft01c6ef51c233b1c311.jpg&refer=http%3A%2F%2Fp1.ssl.qhimgs1.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658649934&t=545eed7f2f896a705d8931ebe34fe3f5"
											mode=""></image>
										<text>黄金季 长寿节开幕</text>
									</view>
								</view>
								<view id="demo2" class="img">
									<view class="imgbox">
										<image
											src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.ssl.qhimgs1.com%2Fbdr%2F460__%2Ft01c6ef51c233b1c311.jpg&refer=http%3A%2F%2Fp1.ssl.qhimgs1.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658649934&t=545eed7f2f896a705d8931ebe34fe3f5"
											mode=""></image>
										<text>黄金季 长寿节开幕</text>
									</view>
								</view>
								<view id="demo3" class="img">
									<view class="imgbox">
										<image
											src="https://img0.baidu.com/it/u=1018667150,1160142692&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"
											mode=""></image>
										<text>黄金季 长寿节开幕</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 精彩游记 -->
			<view class="recommend recommend2">
				<view class="title">
					<text class="t_left">精彩游记</text>
					<text>全部 ></text>
				</view>
				<view class="imgList">
					<view class="l_left">
						<view class="box">
							<view class="img">
								<image
									src="https://tse3-mm.cn.bing.net/th/id/OIP-C.h785ZaRIv7C8lVeQpeN5fwHaEo?pid=ImgDet&rs=1"
									mode="widthFix"></image>
							</view>
							<view class="text">
								秋天是什么颜色的
							</view>
						</view>
						<view class="box">
							<view class="img">
								<image
									src="https://tse3-mm.cn.bing.net/th/id/OIP-C.h785ZaRIv7C8lVeQpeN5fwHaEo?pid=ImgDet&rs=1"
									mode="widthFix"></image>
							</view>
							<view class="text">
								秋天是什么颜色的
							</view>
						</view>
					</view>
					<view class="l_right">
						<view class="box">
							<view class="img">
								<image
									src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi4%2F2209110930284%2FO1CN010JrC2e1Dy777QcpZa_%21%212209110930284.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658652514&t=7e78097fad25e7c9b405cb5743db820f"
									mode="widthFix"></image>
							</view>
							<view class="text">
								秋天是什么颜色的
							</view>
						</view>
						<view class="box">
							<view class="img">
								<image
									src="https://tse3-mm.cn.bing.net/th/id/OIP-C.h785ZaRIv7C8lVeQpeN5fwHaEo?pid=ImgDet&rs=1"
									mode="widthFix"></image>
							</view>
							<view class="text">
								秋天是什么颜色的
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		created() {
			// this.$http({
			// 	url:10
			// })
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	@import url('@/static/iconfont/iconfont.css');
	@radius: 16rpx; //圆角
	@h1: 36rpx; //大标题
	@h2: 32rpx; //二级标题
	@h3: 28rpx; //三级标题
	@text: 24rpx; //四级标题、标签、说明文字
	//颜色
	@color1: #C78748;
	@color2: #FFBF81;
	@color3: #673A19;
	@color4: #42BAE7;
	@color5: #5D9319;
	@color6: #E0593B;
	@color7: #FFF9EF;
	//间距
	@interval1: 72rpx;
	@interval2: 48rpx;
	@interval3: 32rpx;
	@interval4: 16rpx;

	.content {
		font-size: @text;
	}

	.hader {

		.uni-margin-wrap,
		.swiper,
		.bgImg {
			width: 750rpx;
			height: 500rpx;
		}
	}

	.main {
		margin-top: -@radius;
		padding-top: @interval3;
		z-index: 2;
		width: 750rpx;
		border-radius: @radius;
		background-color: @color7;
	}

	.nav,
	.recommend {
		padding: 0 @interval3;
	}

	.nav {
		margin-bottom: @interval3;
	}

	.main_nav {
		display: flex;

		.banner {
			text-align: center;

			image {
				width: ceil((750 - 64) / 5rpx);
				height: ceil((750 - 64) / 5rpx);
			}

			.title {
				font-size: @h3;
			}
		}
	}

	//天气
	.weather {
		margin: 0 @interval3;
		margin-bottom: @interval3;
		width: ceil(750 - 64rpx);
		height: 100rpx;
		border-radius: @radius;
		overflow: hidden;
		position: relative;

		.bgImg {
			width: (750 - 64rpx);
			position: absolute;
			top: -60rpx;
		}

		.w_content {
			width: ceil(750 - 128rpx);
			padding: @interval3;
			position: absolute;
			font-size: @h2;
			color: #FFF;
			left: 0;
			top: 0;
			display: flex;
			justify-content: space-between;

			.iconfont {
				font-size: @h2  !important;
			}
		}
	}

	.recommend {
		margin-bottom: @interval3;

		.title {
			display: flex;
			justify-content: space-between;

			.t_left {
				font-size: @h2;
			}
		}
	}

	.recommend1 .imgList {
		.l_top .box {
			display: flex;

			.img {
				width: 260rpx;
				margin-left: @interval4;

				.imgbox {
					margin: @interval4 0;
					width: 260rpx;
					height: 260rpx;
					overflow: hidden;
					border-radius: @radius;
				}

				image {
					width: 260rpx;
				}
			}

			& .img:first-child {
				margin-left: 0;
			}
		}

		.l_buttom .box {
			display: flex;

			.img {
				width: 536rpx;
				margin-left: @interval4;
			}

			.imgbox {
				margin-top: @interval3;
				width: 536rpx;
				height: 260rpx;
				overflow: hidden;
				border-radius: @radius;
				position: relative;

				text {
					color: #FFF;
					position: absolute;
					bottom: @interval4;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			image {
				width: 536rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&>.img:first-child {
				margin-left: 0;
			}
		}
	}

	.recommend2 .imgList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.box {
			.img {
				margin: @interval4 0;
				border-radius: @radius;
				overflow: hidden;
				font-size: 0;
			}

			image {
				width: ceil((750 - 64 - @interval4) / 2);
			}

			.text {
				margin-bottom: @interval3;
			}
		}
	}
</style>
